<template>
  <div>
    <div v-show="!showAdd">
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
      <table-box
        ref="refTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :off-set="-10"
        show-selection
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      >
        <el-table-column slot="before" fixed="left" label="序号" type="index" />
      </table-box>
    </div>
    <add-form
      v-if="showAdd"
      ref="formDlg"
      :page-show.sync="showAdd"
      @success="refreshTable"
    />
    <edit-form
      v-if="showEdit"
      ref="editDlg"
      :visible.sync="showEdit"
      @success="refreshTable"
    />
    <export-file
      v-if="exportVisible"
      title="导出PPT"
      :config="exportConfig"
      :visible.sync="exportVisible"
    />

  </div>
</template>

<script>
import { deletePicToPPT } from '@/api/basicData'
import addForm from './EditForm.vue'
import editForm from './EditItem.vue'
import exportFile from './ExportDlg.vue'
export default {
  name: 'PicToPPT',
  components: { addForm, exportFile, editForm },
  data() {
    return {
      searchConfig: [
        { label: '问题描述', prop: 'problemDescribe', type: 'text', value: '', placeholder: '' },
        { label: '验收任务号', prop: 'acceptCode', type: 'text', value: '', placeholder: '' },
        { label: '责任归属', prop: 'accountability', type: 'text', value: '', placeholder: '' },
        { label: '问题分类', prop: 'problemCategory', type: 'text', value: '', placeholder: '' },
        { label: '问题类型', prop: 'problemType', type: 'text', value: '', placeholder: '' }
      ],
      exportVisible: false,
      showAdd: false,
      showEdit: false,
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/acceptProblem/page`,
        hideSearchBar: true,
        pageSize: 20,
        // sort: 'createTime',
        order: 'desc',
        apiHeader: {
          // 'Permission-perCode': 'pic_to_ppt', // SURVEY_DESIGN
          // 'Permission-App': 'slm'
        },
        setting: [
          {
            prop: 'url',
            label: '图片预览',
            width: '100',
            type: 'hidden',
            render: (h, row) => {
              if (!row.url) return ''
              return h('el-image', {
                attrs: {
                  src: `${process.env.VUE_APP_IMG_PREFIX}` + row.url,
                  height: 30,
                  previewSrcList: [`${process.env.VUE_APP_IMG_PREFIX}` + row.url]
                }
              })
            }
          },
          {
            prop: 'problemDescribe',
            label: '问题描述',
            minWidth: 130
          },
          // 验收任务号、责任归属、问题分类、问题类型字段
          {
            prop: 'acceptCode',
            label: '验收任务号',
            minWidth: 130
          },
          {
            prop: 'accountability',
            label: '责任归属',
            minWidth: 130
          },
          {
            prop: 'problemCategory',
            label: '问题分类',
            minWidth: 130
          },
          {
            prop: 'problemType',
            label: '问题类型',
            minWidth: 200
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '导入图片',
            outerFlag: true,
            optCode: 'import'
          },
          {
            buttonName: '导出PPT',
            outerFlag: true,
            optCode: 'export'
          },
          // {
          //   buttonName: '编辑',
          //   outerFlag: true,
          //   optCode: 'edit'
          // },
          {
            buttonName: '删除',
            outerFlag: true,
            optCode: 'delete'
          }] : null
      },
      activeRowData: '',
      showDetailPage: false
    }
  },
  computed: {
    exportConfig() {
      return {
        code: 'export',
        name: '图片转PPT',
        dataApi: '/slm-admin/api/v1/acceptProblem/pptExport',
        selectedRows: this.tableSelected,
        headers: {
          // 'Permission-Percode': 'SURVEY_DESIGN',
          // 'Permission-App': 'slm'
        },
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }
    }
  },
  created() {
  },
  methods: {
    // 清空搜索条件
    clearSearch(data) {
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    refreshTable(isInit) {
      this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
    },
    btnOperate(code) {
      switch (code) {
        case 'import':
          this.showAdd = true
          break
        case 'export':
          this.handleExport()
          break
        case 'delete':
          if (!this.singleJudge(this.tableSelected, '删除', false)) {
            return
          }
          this.handleDelete()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit()
          break
        default:
          break
      }
    },
    handleEdit() {
      this.showEdit = true
    },
    handleDelete() {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = this.tableSelected.map(v => v.id)
        deletePicToPPT(data).then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.refreshTable(true)
          }
        })
      })
    },
    handleExport() {
      this.exportVisible = true
    },
    selectionChangeHandle(data) {
      this.tableSelected = data
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
